/***

Nav
===

Header contextual navigation

***/

$height__nav: 60px;

.nav {
  background: $color__nav;
  overflow:hidden;
  height:60px;

  .s--search & {
    transition: background-color 0.14s $bezier__bounce;
    background: black;
  }
}

.nav__list {
  margin-left: -17px;
  flex-grow: 1;
  white-space: nowrap;
  height:60px + 50px;
  overflow:hidden;
  overflow-x:auto;

  @include breakpoint(xsmall) {
    margin-left: -#{ map-get($outer-gutters, xsmall)};
    padding-left: #{ map-get($outer-gutters, xsmall) - 17px };
    width:calc(100% + #{ map-get($outer-gutters, xsmall) + map-get($outer-gutters, xsmall) });
  }

  @include breakpoint(small) {
    margin-left: -#{ map-get($outer-gutters, small)};
    padding-left: #{ map-get($outer-gutters, small) - 17px };
    width:calc(100% + #{ map-get($outer-gutters, small) + map-get($outer-gutters, small) });
  }

  @include breakpoint(medium) {
    margin-left: -#{ map-get($outer-gutters, medium)};
    padding-left: #{ map-get($outer-gutters, medium) - 17px };
    width:calc(100% + #{ map-get($outer-gutters, medium) + map-get($outer-gutters, medium) });
  }

  @include breakpoint(large) {
    margin-left: -#{ map-get($outer-gutters, large)};
    padding-left: #{ map-get($outer-gutters, large) - 17px };
    width:calc(100% + #{ map-get($outer-gutters, large) + map-get($outer-gutters, large) });
  }

  .s--search & {
    transition: all 0.14s $bezier__bounce;
    visibility: hidden;
  }
}

.nav__item {
  height: $height__nav;
  display: inline-block;
  color: $color__text--light;

  &.s--on,
  &:hover {
    color: $color__background;
  }

  a {
    height: $height__nav;
    line-height: $height__nav;
    display: inherit;
    text-decoration: none;
    position: relative;
    padding: 0 17px;
  }

  &.s--on a::after {
    content: '';
    height: 3px;
    position: absolute;
    bottom:0;
    background:$color__background;
    width:100%;
    left:0;
    right:0;
  }
}
